<script setup>
import { DeleteOutlined } from '@ant-design/icons-vue';
import { delLayer } from '../api/use-layer-common.js';
import { UserOpGte } from '../op-perms.js';

const props = defineProps(['item']);
</script>

<template>
  <li class="label-layer label-comment">
    <span class="reason">{{ props.item.rejectReason }}</span>
    <span class="remark">{{ props.item.remark }}</span>

    <div class="fn">
      <template v-if="UserOpGte('审核')">
        <a-popconfirm
          title="确定删除此数据？"
          placement="left"
          ok-text="确定"
          cancel-text="取消"
          @confirm="() => delLayer(props.item)"
        >
          <a-button>
            <template #icon><delete-outlined style="color: rgb(200,0,0);" /></template>
          </a-button>
        </a-popconfirm>
      </template>
    </div>
  </li>
</template>

<style>
.text-classification .label-comment { border-color: transparent; }

.label-comment {
  align-items: baseline;
  height: auto;
  min-height: 40px;
  line-height: 40px;
}

.label-comment .reason {
  flex: unset;
  color: rgb(200,0,0);
}

.label-comment .remark {
  flex: 1;
  width: 0;
  overflow-wrap: break-word;
  line-height: normal;
}
</style>
